<template>
  <div class="member" v-loading="loading">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header">
        <span class="member-header">Members List</span>
        <div v-if="showEdit" >
          <el-button class="noticeBtn" icon="cuifont icon_alert_filled" @click="showMemberNotice = true" type="text" size="mini"> <span v-if="noticeNumber">{{noticeNumber}}</span></el-button>
          <el-button icon="cuifont icon_people_add" @click="showInvite = true" type="text" size="mini"></el-button>
          <el-button icon="cuifont icon_people_settings" @click="isEdit = true" type="text" size="mini"></el-button>
        </div>
      </div>
      <div class="member-c">
        <div class="member-card">
          <div class="member-title">Group Captains</div>
          <div class="member-user" v-for="item in userList" :key="item.userId">
            <template v-if="item.type === 0 && !item.isDelete">
              <div class="member-item">
                <div class="member-item-info">
                  <img class="member-item-avatar" :src="item.headUrl" alt="">
                  <div class="member-item-name">
                    <div>{{ item.realName }}</div>
                    <div class="tip">of {{item.email.split('@')[1]}}</div>
                  </div>
                  <div class="member-item-email">{{ item.email }}</div>
                </div>
                <div class="member-item-setting" v-if="isEdit">
                  <el-select v-model="item.userType" placeholder="Please Select">
                    <el-option
                        v-for="item in roleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                  <i class="el-icon-close" @click="deleteUserCheck(item)"></i>
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="member-card">
          <div class="member-title">Group Members</div>
          <div class="member-user" v-for="item in userList" :key="item.userId">
            <template v-if="item.type !== 0 && !item.isDelete">
              <div class="member-item">
                <div class="member-item-info">
                  <img class="member-item-avatar" :src="item.headUrl" alt="">
                  <div class="member-item-name">
                    <div>{{ item.realName }}</div>
                    <div class="tip">of {{item.email.split('@')[1]}}</div>
                  </div>
                  <div class="member-item-email">{{ item.email }}</div>
                </div>
                <div class="member-item-setting" v-if="isEdit">
                  <el-select v-model="item.userType" placeholder="Please Select">
                    <el-option
                        v-for="item in roleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                  </el-select>
                  <i class="el-icon-close" @click="deleteUserCheck(item)"></i>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="edit-footer" v-if="isEdit">
        <el-button size="small" @click="cancel">Cancel</el-button>
        <el-button size="small" type="primary" @click="save">Save</el-button>
      </div>
    </el-card>
    <member-notifications :visible.sync="showMemberNotice" :noticeNumber.sync="noticeNumber" @getData="getGroupUserList"></member-notifications>
    <member-invite :visible.sync="showInvite"></member-invite>
    <z-notice :visible.sync="showNotice" v-bind="noticeObject" @ok="ok"></z-notice>
  </div>
</template>·

<script>
import memberNotifications from '@/views/modules/mspbots/peerGroup/peerGroupDetail/memberNotifications'
import memberInvite from '@/views/modules/mspbots/peerGroup/peerGroupDetail/memberInvite'
import ZNotice from '@/components/storybook/z-dialog-notice'
export default {
  name: 'member',
  props: ['showEdit'],
  components: {
    memberNotifications,
    memberInvite,
    ZNotice
  },
  data () {
    return {
      loading: false,
      isEdit: false,
      showMemberNotice: false,
      showInvite: false,
      showNotice: false,
      noticeObject: {
        icon: 'icon_message_alt_check',
        title: 'Are you sure you want to exit this group？',
        info: 'You cannot undo this operation. Please double-check before you proceed.',
        okButton: {
          text: 'Yes',
          type: 'primary'
        },
        closeButton: {
          text: 'Cancel'
        }
      },
      userList: [],
      noticeNumber: 0,
      roleOptions: [
        { label: 'Captain', value: 0 },
        { label: 'Member', value: 1 }
      ],
      deleteUserInfo: null
    }
  },
  methods: {
    async getGroupUserList () {
      this.loading = true
      const params = {
        groupId: this.$route.query.groupId,
        status: 1
      }
      const { getPeerGroupUser } = this.$interface.system
      const { data } = await getPeerGroupUser(params)
      if (data.code === 0) {
        this.userList = data.data.records.map(item => {
          item.userType = item.type
          item.isDelete = false
          return item
        })
      } else {
        this.$message.error(data.msg)
      }
      this.loading = false
    },
    del (item) {
      item.isDelete = true
    },
    save () {
      // const captains = this.userList.filter(item => item.type === 0)
      const captainsChange = this.userList.filter(item => item.userType === 0)
      this.userList.map(async item => {
        if (item.isDelete) {
          await this.deleteUser(item)
        } else {
          if (captainsChange.length === 0) {
            this.$message.error('There must be an Captains')
          } else {
            if (item.type !== item.userType) {
              await this.changeRole(item)
            }
          }
        }
      })
      this.isEdit = false
    },
    cancel () {
      this.isEdit = false
      this.getGroupUserList()
    },
    deleteUserCheck (item) {
      const captains = this.userList.filter(item => item.type === 0)
      if (captains.length === 1 && item.type === 0) {
        return this.$message.error('There must be an Captains')
      }
      this.deleteUserInfo = item
      this.noticeObject = {
        icon: 'icon_message-alt-error',
        title: '',
        info: 'This member will be removed from the peer group. Please confirm if you wish to continue.',
        okButton: {
          text: 'Confirm',
          type: 'primary'
        },
        closeButton: {
          text: 'Cancel'
        }
      }
      this.showNotice = true
    },
    ok () {
      this.deleteUser(this.deleteUserInfo)
    },
    async deleteUser (item) {
      const params = {
        groupId: this.$route.query.groupId,
        userId: item.userId
      }
      const { deletePeerGroupUser } = this.$interface.system
      const { data } = await deletePeerGroupUser(params)
      if (data.code === 0 && data.data) {
        this.$message.success('Success')
        await this.getGroupUserList()
      } else {
        this.$message.error(data.msg)
      }
    },
    async changeRole (item) {
      const params = {
        groupId: this.$route.query.groupId,
        userId: item.userId,
        type: item.userType
      }
      const { userRolePeerGroup } = this.$interface.system
      const { data } = await userRolePeerGroup(params)
      if (data.code === 0 && data.data) {
        this.$message.success('Success')
        await this.getGroupUserList()
      } else {
        this.$message.error(data.msg)
      }
    }
  },
  created () {
    this.getGroupUserList()
  }
}
</script>

<style scoped lang="scss">
.member-c{
  height: calc(100vh - 355px);
  overflow: auto;
}
.member{
  padding: 16px;
  ::v-deep .el-card__header {
    padding: 0 16px;
    .header {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  ::v-deep .el-card__body {
    padding: 0;
  }
  &-header {
    font-weight: 600;
  }
  &-title {
    color: #0000009B;
    font-size: 14px;
    line-height: 32px;
    border-bottom: 1px solid #00000014;
    padding: 0 16px;
    font-weight: bold;
  }
  &-item {
    height: 56px;
    padding: 0 16px;
    border-bottom: 1px solid #00000014;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-info {
      display: flex;
      align-items: center;
    }
    &-setting {
      padding-right: 40px;
      i {
        margin-left: 30px;
        cursor: pointer;
      }
    }
    &-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 13px;
    }
    &-name {
      width: 396px;
      font-weight: 600;
      color: #0043CE;
      font-size: 14px;
      line-height: 20px;
      .tip {
        color: #0000009B;
        line-height: 16px;
        font-size: 12px;
      }
    }
    &-email {
      color: #0000009B;
      font-size: 12px;
    }
  }
}
.edit-footer {
  //text-align: right;
  height: 48px;
  padding-right: 12px;
  display: flex;
  align-items: center;
  justify-content: right;
}
.noticeBtn {
  position: relative;
  span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #DA1E28;
    top: -5px;
    right: -5px;
    color: #FFFFFF;
  }
}
::v-deep .el-button .cuifont {
  font-size: 20px;
}
::v-deep .el-button--text {
  color: #000000;
}
</style>
